<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '面条'">修改 obj</button>
</template>

<script>
import { watch, reactive, isReactive } from 'vue'
export default {
  name: 'App',
  setup() {
    //
    const obj = reactive({
      hobby: {
        eat: '西瓜',
      },
      info: {},
    })
    // console.log(obj.hobby.eat)
    // 普通值不能直接监听
    /* watch(obj.hobby.eat, (newV, oldV) => {
      console.log(newV, oldV)
    }) */

    // console.log(isReactive(obj.hobby)) // reactive 类型的
    // 监听的是一个 reactive 类型的数据，默认开启深度监听的，改都改不了
    /* watch(obj.hobby, (newV, oldV) => {
      console.log(newV, oldV)
    }) */
    // 首先没必要，其次也不行，触发不了监听
    /* watch(
      () => obj.hobby,
      (newV, oldV) => {
        console.log(newV, oldV)
      }
    ) */
    // 如果实在想这样写，触发监听，需要 deep: true
    /* watch(
      () => obj.hobby,
      (newV, oldV) => {
        console.log(newV, oldV)
      },
      {
        deep: true,
      }
    ) */
    // !解决：监听函数返回一个普通值
    watch(
      () => obj.hobby.eat,
      (newV, oldV) => {
        console.log(newV, oldV)
      }
    )

    return { obj }
  },
}
</script>
